import { Tabs } from "antd-mobile";
import HomeIconSearch from "../../assets/home_icon_search.png";
import styled from "./index.module.css";
import { useEffect, useMemo, useState } from "react";
import { useAppDispatch, useAppSelector } from "@/hooks";
import {
  fetchBrandList,
  fetchCategoryList,
  fetchProductList,
} from "@/store/modules/product";
import { useSearchParams } from "react-router-dom";
import { PayloadAction } from "@reduxjs/toolkit";

const Products = () => {
  const dispatch = useAppDispatch();

  const [search, setSearch] = useSearchParams();

  // 分类数组
  const categoryList = useAppSelector((state) => state.product.categoryList);
  // 当前选中的分类Id
  const activeCategoryId = useMemo(() => {
    // 1. 获取 cid
    const cid = search.get("cid");
    // 2. 判断 cid 是否存在
    return cid ? cid : categoryList[0]?.classId;
  }, [search, categoryList]);

  // 当前选中的品牌Id
  const [curBrandId, setCurBrandId] = useState("");
  // 品牌数组
  const brandList = useAppSelector((state) => state.product.brandList);

  // 产品数组
  const productList = useAppSelector((state) => state.product.productList);

  useEffect(() => {
    // 派发 fetchCategoryList 异步动作
    dispatch(fetchCategoryList());
  }, []);

  useEffect(() => {
    if (!activeCategoryId) return;
    dispatch(fetchBrandList(activeCategoryId)).then(({ payload }) => {
      setCurBrandId((payload as any).brandList[0].brandId);
    });
  }, [activeCategoryId]);

  useEffect(() => {
    if (!activeCategoryId || !curBrandId) return;
    dispatch(
      fetchProductList({
        classId: activeCategoryId,
        brandId: curBrandId,
        pageIndex: "1",
        pageSize: "20",
      })
    );
  }, [activeCategoryId, curBrandId]);

  return (
    <div className={styled.page}>
      <div>
        <img src={HomeIconSearch} alt="" />
        <span>请输入您想要售卖的机型名称</span>
      </div>

      <Tabs
        activeKey={activeCategoryId}
        onChange={(key) =>
          // TODO.
          setSearch((prev) => {
            console.log("prev", prev);
            return {
              ...prev,
              cid: key,
            };
          })
        }
      >
        {categoryList.map((item) => (
          <Tabs.Tab title={item.className} key={item.classId} />
        ))}
      </Tabs>

      <div className={styled.layout}>
        <div className={styled.left}>
          <div>
            {brandList.map((item) => (
              <div
                className={
                  curBrandId === item.brandId
                    ? `${styled.brand} ${styled.active}`
                    : styled.brand
                }
                key={item.brandId}
                onClick={() => setCurBrandId(item.brandId)}
              >
                {item.brandName}
              </div>
            ))}
          </div>
        </div>
        <div className={styled.right}>
          <div>
            {productList.map((item) => (
              <div className={styled.product} key={item.productId}>
                <span>{item.productName}</span>
                <span>￥{(+item.productMaxPrice / 100).toFixed(2)}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Products;
